<script lang="ts" setup>
import { phoneRegEx } from "@/utils";
import debounce from "@/utils/debounce";
import { computed, ref, getCurrentInstance } from "vue";
import sendCode, { send } from "@/utils/sendCode";
// #ifdef H5
import "@/lib/TCaptcha";
// #endif
const phone = ref<string>("");
const popupRef = ref<any>("popupRef");
const checkboxValue = ref<string[]>([""]);
const secondCount = ref<string>("");

const instance: any = getCurrentInstance();
const btnDisabled = computed(() => {
  return phone.value === "" && secondCount.value === "";
});

const toPrivacy = (type: string) => {
  uni.navigateTo({
    url: "/pages/privacy/privacy?type=" + type
  });
};

const handleConfirmLogin = debounce(async () => {
  if (phone.value === "") {
    uni.showToast({
      title: "手机号不能为空",
      icon: "none"
    });
    return;
  }

  if (!phoneRegEx.test(phone.value)) {
    uni.showToast({
      title: "手机号格式校验错误，请重新输入",
      icon: "none"
    });
    return;
  }

  if (checkboxValue.value.length <= 0 || checkboxValue.value[0] === "") {
    uni.showToast({
      title: "请勾选用户协议与隐私政策",
      icon: "none"
    });
    return;
  }
  // #ifdef H5
  const isOk = await sendCode(phone.value);
  if (isOk) {
    uni.navigateTo({
      url: "/pages/register/register?phone=" + phone.value
    });
  } else {
    uni.showToast({
      icon: "none",
      title: "发送失败"
    });
  }
  // #endif

  // #ifndef H5
  instance.ctx.selectComponent("#captcha").show();
  // #endif
});

const selectAgreement = (isArgee: boolean = false) => {
  popupRef.value?.close();
  checkboxValue.value = [isArgee ? "ok" : ""];
};
const handleChangeAgreement = (bool: boolean) => {
  if (bool) {
    popupRef.value?.open();
  } else {
    popupRef.value?.close();
  }
};
const handlerVerify = async (res: any) => {
  const isok = await send(phone.value, res);
  if (isok) {
    uni.navigateTo({
      url: "/pages/register/register?phone=" + phone.value
    });
  } else {
    uni.showToast({
      icon: "none",
      title: "发送失败"
    });
  }
};
const handlerError = () => {
  uni.showToast({
    icon: "none",
    title: "发送失败"
  });
};
</script>

<template>
  <!-- #ifdef MP-WEIXIN -->
  <t-captcha
    id="captcha"
    app-id="190901371"
    @verify="handlerVerify"
    @error="handlerError"
  />
  <!-- #endif -->
  <Container :canAutoBack="false">
    <Flex class="login" direction="column">
      <image
        class="logo"
        src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/logo.png?v=1"
      />
      <view class="title"> 桃奢AI商城 </view>

      <uv-input
        :type="'number'"
        placeholder="请输入手机号"
        border="none"
        color="#333"
        shape="circle"
        v-model="phone"
        maxlength="11"
        clearable
        customStyle="height: 60rpx;width: 670rpx;border-radius: 20rpx;"
      />
      <t-button
        :type="phone ? 'deep' : ''"
        :disabled="btnDisabled"
        :backgroundColor="btnDisabled ? 'rgba(51,51,51,0.5)' : '#333333'"
        margin="24px auto"
        width="670rpx"
        height="80rpx"
        borderRadius="20rpx"
        @click="handleConfirmLogin"
      >
        登录
      </t-button>

      <Flex>
        <uv-checkbox-group v-model="checkboxValue" placement="column">
          <uv-checkbox
            name="ok"
            activeColor="var(--btn-bg-color-active)"
          ></uv-checkbox>
        </uv-checkbox-group>
        <view class="confirm">
          我同意
          <text class="user-color" @click="handleChangeAgreement(true)">
            《用户协议》及《隐私政策》
          </text>
        </view>
      </Flex>
    </Flex>

    <uv-popup ref="popupRef" mode="bottom" safeAreaInsetBottom round="15">
      <view class="agreement-info">
        <Flex justify="space-between">
          <view class="label">隐私政策和服务协议</view>
          <uv-icon
            name="close"
            :labelColor="'#000'"
            bold
            @click="handleChangeAgreement(false)"
          />
        </Flex>

        <view class="text-info">
          <view class="text">
            欢迎下载和使用【AI法律助手】，在您使用我们的服务之前，请仔细阅读
            <text class="user-color" @click="toPrivacy('2')">
              《隐私政策》
            </text>
            和
            <text class="user-color" @click="toPrivacy('1')">
              《服务协议》 </text
            >。
          </view>
          <view class="text">
            如果你已经阅读并认可上述政策和协议，请点击“同意”按钮。
          </view>
        </view>

        <Flex justify="space-between">
          <t-button
            @click="selectAgreement(false)"
            type="light"
            background-color="rgba(51,51,51, 0.5)"
            style="margin-right: 10px"
            width="290rpx"
          >
            不同意退出
          </t-button>
          <t-button
            style="margin-left: 10px"
            background-color="#333"
            width="290rpx"
            @click="selectAgreement(true)"
          >
            同意
          </t-button>
        </Flex>
      </view>
    </uv-popup>
  </Container>
</template>

<style lang="scss" scoped>
.header-page {
  // background-color: var(--color-text-assist-1);
}
.login {
  margin-top: 94px;

  .title {
    margin: 16px 0 50px;
    color: var(--color-text-default);
    font-size: 32rpx;
  }

  .logo {
    width: 160rpx;
    height: 160rpx;
    margin: 0 auto;
  }

  .change-phone-img {
    width: 40rpx;
    height: 40rpx;
  }

  .confirm {
    color: var(--color-text-assist-1);
    font-size: 12px;
  }
}

.agreement-info {
  padding: 20px 24px;

  .label {
    color: var(--color-text-assist);
    font-weight: bold;
  }

  .text-info {
    color: #111;
    font-size: 13px;
    padding-top: 25px;
    text-align: justify;

    .text {
      padding-bottom: 10px;
    }
  }
}

.font-48 {
  font-size: 24px;
  font-weight: 500;
}

.user-color {
  color: #495bff;
}
::v-deep .uv-input {
  width: 295px;
  padding: 10px !important;
  background: #f9f9f9;
  box-sizing: border-box;
}
</style>
